<template>
  <rk-dialog width="60%"
    height="60%"
    :title="title"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    @close="visible = false">
    <div class="custom-beauty-scroll">
      <expend-property-form ref="expendPropertyFormRef"
        :expendModel="echoForm"
        :model="model"></expend-property-form>
    </div>
    <template #footer>
      <el-button type="primary"
        @click="handleConfirm">确定
      </el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </rk-dialog>
</template>
<script setup>
import ExpendPropertyForm from '../form/ExpendPropertyForm.vue'
import { ElMessage, ElLoading } from "element-plus"
import { useAttaruleApi } from '@/api/index.js'
import { nextTick } from 'vue'
import { ref, reactive } from 'vue';

const { saveExtendProperty } = useAttaruleApi();
const emits = defineEmits([
  'refresh'
])

const title = ref('')
// 是否展示弹窗
const visible = ref(false)
const expendPropertyFormRef = ref()
const model = ref('')
let echoForm = reactive({})
const MODAL_TYPE = {
  'add': { code: 'add', text: '新建附件扩展属性' },
  'edit': { code: 'edit', text: '修改附件扩展属性' }
}

/** 打开弹出层 */
const handleOpen = async (options) => {
  visible.value = true
  const { model: opration, echoForm: seleModel } = options
  title.value = MODAL_TYPE[opration].text
  if (opration === 'add') {
    echoForm = {}
  } else if (opration == 'edit') {
    echoForm = {
      ...seleModel
    }
  }
  model.value = opration
  await nextTick()
  expendPropertyFormRef.value.loadForm()
}

/** 确定事件 */
const handleConfirm = async () => {
  let loading = null
  const validate = await expendPropertyFormRef.value.validateForm();
  if (validate) {
    const params = expendPropertyFormRef.value.getFormData()
    loading = ElLoading.service({ fullscreen: true, text: '保存中,请稍等..' })
    const result = await saveExtendProperty(params)
    const { data, code, msg } = result
    if (code === 200) {
      loading.close()
      handleClose()
      ElMessage({ message: `保存成功！`, type: "success" });
      emits('refresh')
    } else {
      loading.close()
      handleClose()
      ElMessage({ message: msg, type: "error" });
    }
  }
}

/** 关闭弹窗 */
const handleClose = () => {
  visible.value = false
  // expendPropertyFormRef.value.resetForm()
}

// 对外暴露方法
defineExpose({
  handleOpen
})

</script>

<style lang="less" scoped>
</style>
